<template>
	<view style="padding-top: 60rpx;">
		<uni-nav-bar :leftIcon="deleteIcon" :title="'购物车('+catNums+')'" fixed="true" :shadow="false" backgroundColor= "" @clickLeft="deleteCart()"></uni-nav-bar>
		<view class="nogoods" v-if="logined && cartGoods.length<1">
			购物车空空如也
		</view>
		<view class="nologin" v-if="!logined">
			<view class="blankbox">
				暂未登录
				<view class="loginBtn" @click="goLogin()">请先登录</view>
			</view>
		</view>
		<view class="cart-box">
			<view class="goods-box">
				<view class="item" v-for="(item ,i) in cartGoods" :key="item.gid">
					<checkbox-group @change="selectOne(i)" class="gou">
						<label>
							<checkbox :checked="item.isSelect" color="red"></checkbox>
						</label>
					</checkbox-group>
					<view class="imgbox" @click="goDetail(item.gid)">
						<image :src="switchImg(item.gImages)" class="goods-img"></image>
					</view>
					<view class="goods-info">
						<view class="gname" @click="goDetail(item.gid)">{{item.gName}}</view>
						<view class="jianjie" @click="goDetail(item.gid)">{{item.jianjie}}</view>
						<view class="guigebox" @click="goDetail(item.gid)" style="color: green;font-size: 10px;">{{item.guiges | resetGuige}}</view>
						<view class="jiage-box">
							<view class="qian">{{item.cartPrice}}</view>
							<view class="btn-group">
								<view class="jian" @click="numJian()">-</view>
								<view class="num">{{item.num}}</view>
								<view class="jia" @click="numJia()">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<checkbox-group @change="selectAll()">
					<label>
						<checkbox :checked="isAll" color="red">全选</checkbox>
					</label>
				</checkbox-group>
				<view>
					<view>合计：<text class="qian">{{gouXuanJia}}</text></view>
					<view class="nofee">不含运费</view>
				</view>
				<view class="jiesuanBtn" @click="jiesuan()">
					结算({{selectGoods.length}})
				</view>
			</view>
		</view>
		<u-tabbar v-model="current" :list="list" :mid-button="false" @change="tab"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 底部tab
				list:[
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/quanfan/fenlei/fenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/quanfan/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/center/index"
					},
				],
				logined:false,
				current:0,
				deleteIcon: '',		// 右上角图标
				selectGoods:[	],	// 勾选的商品
				isAll:false,		// 是否全选
				cartGoods:[],		// 购物车中的商品
				allMoney:0	,		// 结算金额
				selectCount:0,		// 勾选数量
				catNums:0,			// 购物车数量
			}
		},
		methods: {
			tab(e){
				this.current = e;
			},
			// 删除购物车
			deleteCart(){
				// xieliancat.do?p=plcatdeleteByMini
				uni.showModal({
					title:"提示?",
					content:"确定删除购物车？",
					success: (res) => {
						if(res.confirm){
							let catid =[];	// 购物车id
							let aaa = "";	// 购物车ID根据逗号拼接
							for(let i=0;i<this.selectGoods.length;i++){
								if(this.selectGoods[i].isSelect){
									catid.push(this.selectGoods[i].cartid);
									if(this.isNull(aaa)){
										aaa = this.selectGoods[i].cartid;
									}else{
										aaa = aaa+","+this.selectGoods[i].cartid;
									}
								}
							}
							console.log("全返商城购物车集合："+catid)
							this.$http.get('/xieliancat.do', {
								p:'plcatdeleteByMini',
								cid:aaa
							}).then(res => {
								if(res.data=='成功')
								{
									this.cartGoods = this.cartGoods.filter(function(item,index,cart){
										return !item.isSelect
									});
									this.selectGoods=[	];
									this.deleteIcon = '';
									this.isAll = false;
									this.catNums = this.cartGoods.length;
									this.$u.toast("成功删除");
								}
							})
						}
					}
				})
			},
			// 购物车数量增加
			numJia(){
				this.$u.toast("全返商品一次只能购买一件")	;
				return;
			},
			numJian(){
				this.$u.toast("不能再少了");
			},
			// 去登陆
			goLogin(){
				uni.navigateTo({
					url:'../../center/login'
				})
			},
			// 跳商品详情
			goDetail(gid){
				uni.navigateTo({
					url:'../GoodsDetail?gid='+gid
				})
			},
			// 设置图片路径
			switchImg(s){
				return this.host+s;
			},
			// 点击结算
			jiesuan(){
				let cid = '';
				if(this.selectGoods.length>1)
				{
					this.$u.toast("暂不支持多商品下单");
					return;
				}
				for(let i=0,len=this.selectGoods.length;i<len;i++){
					if(this.selectGoods[i].isSelect)
					{
						cid= this.selectGoods[i].cartid;
						break;
					}
				}
				uni.navigateTo({
					url:'../ConfirmOrder?id='+cid
				})
			},
			// 全选
			selectAll(){
				this.isAll=!this.isAll;
				if(this.isAll){
					this.selectGoods=[	];
					this.deleteIcon='trash';
					for(let i=0;i<this.cartGoods.length;i++){
						this.cartGoods[i].isSelect=this.isAll;
						this.selectGoods.push(this.cartGoods[i]);
					}
				}
				else{
					this.selectGoods=[	];
					this.deleteIcon='';
					for(let i=0;i<this.cartGoods.length;i++){
						this.cartGoods[i].isSelect=this.isAll;
					}
				}
			},
			// 选一个
			selectOne(n){
				this.selectGoods=[];
				this.cartGoods[n].isSelect=!this.cartGoods[n].isSelect;
				for(let i=0;i<this.cartGoods.length;i++)
				{
					if(this.cartGoods[i].isSelect==true)
						this.selectGoods.push(this.cartGoods[i]);
				}	
				if(this.selectGoods.length == this.cartGoods.length){
					this.isAll = true;
				}else{
					this.isAll = false;
				}
				if(this.selectGoods.length==0)
					this.deleteIcon='';
				else
					this.deleteIcon='trash';
					
			},
			// 加载购物车商品
			checkCart(){
				this.logined = uni.getStorageSync("logined");
				let uid = uni.getStorageSync("usersId")	;
				this.cartGoods=[	];
				this.isAll = false;
				this.allMoney = 0;
				this.catNums = 0;
				this.deleteIcon=''
				this.$http.get('/xieliancat.do', {
					p: 'getAllCatByMini',
					uid:uid
				}).then(res => {
					if(res.data=='请先登录')
					{
						return;
					}
					for(let i=0;i<res.data.list.length;i++){
						let obj={	};
						for(let key in res.data.list[i].goods)
						{
							obj[key] = res.data.list[i].goods[key];
						}
						obj.cartid = res.data.list[i].scatId;
						obj.num= res.data.list[i].scatNum;
						obj.cartPrice = res.data.list[i].money;
						obj.isSelect = false;
						if(res.data.list[i].guiges){
							obj.guiges = res.data.list[i].guiges;
						}
						this.cartGoods.push(obj);
					}
					this.catNums = this.cartGoods.length;
				})
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
		onLoad() {
			this.logined = uni.getStorageSync("logined");
			this.checkCart();
			uni.$on('checkCart', this.checkCart)	//登录或者注销刷新页面数据
		},
		computed:{
			gouXuanJia(){
				let jiage = 0;
				for(let i=0;i<this.selectGoods.length;i++){
					if(this.selectGoods[i].isSelect){
						jiage+= this.selectGoods[i].cartPrice* this.selectGoods[i].num;
					}
				}
				return jiage;
			}
		},
		filters:{
			resetGuige(s){
				let reg = /{/g;
				let reg2 = /}/g;
				if(s)
					return s.replace(reg,'').replace(reg2,'');
					else return '';
			}
		}
	}
</script>

<style scoped>
	.jianjie{
		font-size: 10px;
		color: #C0C4CC;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.nogoods,.nologin{
		text-align: center;
		padding: 200rpx 0rpx;
		background-color: white;
		position: relative;
	}
	.nologin .loginBtn{
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		width: 200rpx;
		margin-left: -100rpx;
		background-color: #FF7900;
		color: white;
		padding: 20rpx 0rpx;
		border-radius: none;
	}
	.goods-box{
		padding-top: 10rpx;
		padding-bottom: 120rpx !important;
	}
	.bottom{
		padding: 20rpx;
	}
	.cart-box{
		position: relative;
		min-height: 1000rpx;
		background: #F6F6F6;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: white;
		margin-bottom: 10rpx;
	}
	.item .goods-img{
		height: 160rpx;
		width: 160rpx;
	}
	.item .btn-group{
		display: flex;
		border: 1px solid #ccc;
		justify-content: space-around;
	}
	.nofee{
		color: #ccc;
		font-size: 24rpx;
	}
	.qian::before{
		content: '￥';
		color: red;
	}
	.qian{
		font-size: 16px;
		color: red;
	}
	.item .goods-info{
		display: flex;
		height: 180rpx;
		flex-direction: column;
		justify-content: space-between;
	}
	.item .jiage-box{
		display: flex;
		justify-content: space-between;
	}
	.item .num{
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	.item .gou{
		flex: 1;
	}
	.item .imgbox{
		flex: 3;
	}
	.item .goods-info{
		flex: 7;
	}
	.btn-group .jian,.btn-group .num,.btn-group .jia{
		padding: 10rpx 20rpx;
		flex: 1;
		text-align: center;
	}
	.bottom{
		position: fixed;
		bottom: 100rpx;
		left: 0rpx;
		width: 100%;
		/* height: 100rpx; */
		display: flex;
		background-color: white;
		justify-content: space-between;
	}
	.jiesuanBtn{
		background-color: red;
		color: white;
		padding:10rpx 30rpx;
		height: 60rpx;
		/* line-height: 60rpx; */
	}
</style>
